<template>
  <el-dialog
    append-to-body
    custom-class="orderDistributionList"
    :close-on-click-modal="false"
    destroy-on-close
    :visible.sync="dialogVisible"
    title="告警列表 ＞工单派发"
    :v-loading="loading"
    top="80px"
    @close="onClose"
  >
    <el-container>
      <el-main
        :style="{ 'max-height': maxHeightDialog }"
        class="container-main"
      >
        <div class="title">
          <span>填写信息</span>
        </div>
        <el-card class="card" shadow="never" style="background: #fafafa">
          <el-form
            ref="form"
            size="small"
            :model="params"
            label-width="120px"
            label-position="right"
            :rules="rules"
          >
            <div v-if="deleteIdStr.length < 1">
              <el-form-item label="设备区分" prop="equipment.deviceIsLine">
                <span class="labelValue">
                  {{
                    params.equipment.deviceIsLine == 0 ? '传统有线' : '智能无线'
                  }}
                </span>
              </el-form-item>
              <el-form-item label="设备编码" prop="deviceSource">
                <span class="labelValue">{{ params.deviceSource }} </span>
              </el-form-item>
              <el-form-item label="设备名称" prop="deviceName">
                <span class="labelValue">{{ params.deviceName }} </span>
              </el-form-item>
              <el-form-item label="告警时间" prop="alertTime">
                <span class="labelValue">{{ params.alertTime }} </span>
              </el-form-item>
              <el-form-item label="告警地点" prop="deviceAddress">
                <span class="labelValue">{{ params.deviceAddress }}</span>
              </el-form-item>
              <el-form-item label="告警原因" prop="alarmCause">
                <span class="labelValue">{{ params.alarmCause }}</span>
              </el-form-item>
              <el-form-item label="告警类型" prop="alarmName">
                <span class="labelValue">
                  {{ params.alarmName }}
                </span>
              </el-form-item>
            </div>

            <el-form-item label="紧急程度" prop="urgency">
              <el-radio-group v-model="params.urgency" size="mini">
                <el-radio
                  v-for="(item, index1) in urgencyList"
                  :key="'value' + index1"
                  :label="item.value"
                  border
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input
                v-model="params.remarks"
                type="textarea"
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-form>

          <el-form
            ref="userForm"
            size="small"
            :model="UserForm"
            label-width="120px"
            label-position="right"
            :rules="rules"
          >
            <el-form-item label="告警处理人" prop="selected">
              <el-select
                v-model="UserForm.selected"
                multiple
                filterable
                clearable
                style="width: 100%"
                placeholder="请选择告警处理人"
                @change="change($event)"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.userId"
                  :label="item.username"
                  :value="item.userId"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
      </el-main>
      <el-footer>
        <el-button
          type="warning"
          plain
          :loading="loading"
          @click="onClose"
          style="margin-right: 10px"
          >{{ $t('common.cancel') }}</el-button
        >
        <el-button
          type="primary"
          plain
          :loading="loading"
          @click="handleSubmit"
          >{{ $t('common.confirm') }}</el-button
        >
      </el-footer>
    </el-container>
  </el-dialog>
</template>

<script>
import moment from 'moment'
moment.locale('zh-cn')
import dataFormMixins from '@/mixins/data-form-mixins'
import systemManageApi from '@/api/system-manage'
import warningManageApi from '@/api/warning-manage'

export default {
  mixins: [dataFormMixins],
  props: {
    params: {
      type: Object,
      default: () => {
        return {}
      },
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    deleteIdStr: {
      type: Array,
      default: null,
    },
  },
  data() {
    const test = (rule, value, callback) => {
      const that = this
      if (
        that.UserForm.selected.length === 0 ||
        that.UserForm.selected.length === ''
      ) {
        this.$message.error('请选择至少一个人')
        return false
      } else {
        callback()
        // 要执行的代码
      }
    }
    return {
      moment: moment,
      loading: false,
      queryParams: {
        status: 1,
      },
      pagination: {
        pageSizeOptions: [10, 20, 30, 40, 100],
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },

      UserForm: { selected: [] },
      radioList: [
        {
          label: '实际报警',
          value: 1,
        },
        {
          label: '误报报警',
          value: 2,
        },
        {
          label: '隔离报警',
          value: 3,
        },
      ],
      urgencyList: [
        {
          label: '较低',
          value: 0,
        },
        {
          label: '普通',
          value: 1,
        },
        {
          label: '紧急',
          value: 2,
        },
        {
          label: '非常紧急',
          value: 3,
        },
      ],
      userList: [],
      select: [],

      rules: {
        urgency: [
          { required: true, message: '请选择紧急程度', trigger: 'change' },
        ],
        selected: [
          { required: true, message: '请选择告警处理人', trigger: 'change' },
        ],
      },
      userRules: {
        selected: [
          {
            validator: test,
          },
        ],
      },
    }
  },
  // watch: {
  //   visible(val) {
  //     if (!val) {
  //       this.$refs['form'].resetFields()
  //     }
  //   }
  // },
  // computed: {
  //   ...mapState({
  //     systemMsgList: state => state.cim.systemMsgList
  //   })
  // },
  mounted() {
    this.getUser()
  },
  methods: {
    onClose() {
      this.UserForm.selected = []
      this.$emit('close')
    },
    change(e) {
      this.select = this.userList.filter((item) =>
        e.some((ele) => ele === item.userId)
      )
    },
    onSuccess() {
      this.dialogVisible = false
      this.reset()
      this.$emit('success')
    },
    reset() {
      this.loading = false
    },
    getUser() {
      const search = {
        deptGuid: this.params.deptGuid ? this.params.deptGuid : '',
      }
      systemManageApi
        .getUserNormal(search)
        .then((data) => {
          this.userList = data.data.data.rows
        })
        .catch((e) => {
          this.$message.error('获取数据失败，请联系管理员')
        })
    },
    // 派发
    postUser(alarmJobId) {
      const list = []
      for (const i in this.select) {
        const obj = {}
        obj.userId = this.select[i].userId
        obj.userName = this.select[i].username
        obj.jobId = alarmJobId || ''
        if (obj.userId) {
          list.push(obj)
        }
      }
      warningManageApi.jobDistribute(list).then((e) => {
        console.log('派发成功')
      })
      // const arr = this.systemMsgList.filter(el => el.equipmentCollect && el.equipmentCollect.id !== alarmJobId)
      // this.$store.commit('cim/resetMsg', arr)
      // this.$store.commit('cim/setListenupdate')
      this.$message.success('派发成功')
      this.onSuccess()
    },
    handleSubmit() {
      // console.log('this.systemMsgList :>> ', this.systemMsgList)
      console.log('this.params.urgency', this.params.urgency)
      this.loading = true
      if (this.UserForm.selected.length === 0) {
        this.$message.error('请选择告警处理人')
        this.loading = false
        return false
      }
      if (this.params.urgency == 0) {
      } else {
        if (!this.params.urgency || this.params.urgency == '') {
          this.$message.error('请选择紧急程度')
          this.loading = false
          return false
        }
      }

      try {
        if (this.deleteIdStr.length > 0) {
          const data = {
            alertIds: this.deleteIdStr,
            urgency: this.params.urgency,
            remarks: this.params.remarks,
            userIds: this.UserForm.selected,
            alarmType: 2,
          }
          warningManageApi.createAndDistribute(data).then((data) => {
            // this.postUser(data.data.data.alarmJobId)
            this.$message.success('批量派发成功')
            this.onSuccess()
          })
        } else {
          const data = {
            alertId: this.params.id,
            alarmLocation: this.params.deviceAddress,
            // alarmOccurTime: this.params.alertTime,
            urgency: this.params.urgency,
            remarks: this.params.remarks,
            alarmType: 2,
          }
          warningManageApi.create(data).then((data) => {
            this.postUser(data.data.data.alarmJobId)
          })
        }
        this.$message.success('生成工单成功')
      } catch (error) {
        this.loading = false
        console.error(error)
        return false
      }
    },
  },
}
</script>


<style lang="scss" scoped>
@import '../../../../../styles/part-custom';
</style>
